<template>
  <div>
    <el-dialog
      v-model="showCreateDialog"
      :close-on-click-modal="false"
      class="algorithmCreate"
      :title="title"
    >
      <el-row class="header">
        <el-col class="verCenter">
          <div class="label">算法名称</div>
          <el-input class="input" v-model="name" />
        </el-col>
        <el-col class="upload" v-show="flageer">
          <el-upload
            v-model:file-list="fileList"
            action=""
            class="upload-demo"
            :auto-upload="false"
            :on-change="handleChange"
          >
            <el-button bg text type="primary">上传算法包</el-button>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-col>
      </el-row>
      <el-row class="main">
        <el-col>
          <div class="title">一、算法介绍</div>
          <el-input
            v-model="introduce1"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-col>
        <el-col>
          <div class="title">二、适用场景</div>
          <el-input
            v-model="introduce2"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-col>
        <el-col>
          <div class="title">三、数据源字段及参数说明</div>
          <el-input
            v-model="introduce3"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">关闭</el-button>
          <el-button type="primary" v-show="flageer" @click="saveFile"
            >保存</el-button
          >
          <el-button type="primary" v-show="!flageer" @click="determine"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, inject, watch, reactive, toRefs } from "vue";
import { customFild, customUpdate } from "@/services/algorithm";
import { ElMessage } from "element-plus";
const { showCreateDialog, rower, title, flagAge } = inject("showCreateDialog");
const customList = inject("customList", () => {}); //接父组件的方法
const flageer = ref(true); //状态
const fileList = ref([]); //绑定上传的文件
//v-model绑定的值
const fileData = ref([]); //上传对象
const data = reactive({
  alsID: "",
  name: "",
  introduce1: "",
  introduce2: "",
  introduce3: "",
});
const { name, introduce1, introduce2, introduce3, alsID } = toRefs(data);
//点击上传文件
const handleChange = (file, fileLists) => {
  fileList.value = {};
  console.log(fileLists);
  //如果第二次上传文件，将前一个文件删除
  //这样fileList就一直保持一个文件
  if (fileLists.length > 1) {
    fileLists.shift(); //往前添加
  }
  fileList.value = fileLists;
  // console.log(fileList.value);
  fileData.value = fileLists[0].raw;
  // console.log(fileData.value);
  // 方案2
  // fileList.value = [file];
};

//保存
const saveFile = async () => {
  if (data.name == "" || fileData.value.length == 0) {
    ElMessage.error("请添加算法名称及上传文件");
    return;
  }
  // console.log(fileData.value, data.name);
  // return;
  const obj = {
    alsName: name.value,
    alsIntro: introduce1.value,
    alsScene: introduce2.value,
    alsParam: introduce3.value,
  };
  const formData = reactive(new FormData()); //这样是vue3创建对象
  formData.append("file", fileData.value);
  formData.append("jsonObj", JSON.stringify(obj));
  const respData = await customFild(formData);
  showCreateDialog.value = false; //关闭弹窗
  customList();
  if (respData?.respCode == 200) {
    ElMessage({
      message: "已保存",
      type: "success",
    });
  } else {
    ElMessage.error("未保存");
  }
};
//确定
const determine = async () => {
  const obj = {
    alsID: alsID.value,
    alsName: name.value,
    alsIntro: introduce1.value,
    alsScene: introduce2.value,
    alsParam: introduce3.value,
  };
  // console.log(obj);
  const respData = await customUpdate(obj);
  customList();
  if (respData?.respCode == 200) {
    ElMessage({
      message: "修改算法信息成功",
      type: "success",
    });
  } else {
    ElMessage.error("修改算法信息失败");
  }
  // console.log(respData);
  showCreateDialog.value = false;
};
//放在一个watch中监听 效果实现不对
watch(
  //监听数据回显
  () => rower.value,
  (newValue, oldValue) => {
    // console.log(newValue);
    alsID.value = newValue.alsID;
    name.value = newValue.alsName;
    introduce1.value = newValue.alsIntro;
    introduce2.value = newValue.alsScene;
    introduce3.value = newValue.alsParam;
  },
  { deep: true },
  { immediate: true }
);
watch(
  //标题和按钮显示状态
  () => title.value,
  (newValue, oldValue) => {
    title.value = newValue;
  },
  { deep: true },
  { immediate: true }
);
watch(
  // 按钮显示状态
  () => flagAge.value,
  (newValue, oldValue) => {
    flageer.value = newValue;
  },
  { deep: true },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.algorithmCreate {
  .header {
    padding: 0 15px;
    height: 105px;
    .label {
      // width: 150px;
      text-align: right;
      padding-right: 10px;
    }
    .input {
      width: 200px;
    }
    .verCenter {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .upload {
      display: flex;
      align-items: center;
    }
  }
  .main {
    padding: 0 15px;
    height: 340px;
    overflow: auto;
    .title {
      padding: 10px 0;
    }
  }
  .el-upload {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .upload-demo {
    display: flex;
  }
  .el-upload-list--text {
    width: auto;
  }
}
:deep(.el-upload-list__item-file-name) {
  overflow: visible;
}
:deep(.el-upload-list__item-name) {
  padding: 0 26px;
}
</style>